<template>
  <div class="container">
    <img class="titleBg" src="@/assets/aiScreen/title1.png" />
    <span class="myTitle">{{text}}</span>
  </div>
</template>

<script>
export default {
  name:"lRForm",
  props: {
    text: {
        type: String
    }
  },
  data () {
    return {
        
    }
  },
  created () {},
  mounted () {
    
  },
  watch: {},
  computed: {},
  methods: {},
  components: {}
}
</script>
<style scoped>
.container {
    position: relative;
    height: 50px;
    width: 100%;
}
.titleBg {
    position: absolute;
    width: 100%;
    left: 0;
    top: -22%;
    
}
.myTitle {
    position: absolute;
    color: #fff;
    left: 11%;
    top: 26%;
    font-family: 'Arial', sans-serif; /* 使用Arial字体 */
            font-size: 15px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            display: inline-block; /* 使元素成为行内块级元素 */
            line-height: 1; /* 调整行高 */
            background: linear-gradient(to bottom, #e7edf0, #a0cae2); /* 渐变背景 */
            -webkit-background-clip: text; /* 兼容Webkit内核浏览器 */
            background-clip: text; /* 标准属性 */
            -webkit-text-fill-color: transparent; /* 使文本颜色透明 */
}
</style>